import { Button, Box, LightMode, DarkMode, useTheme, useColorMode } from '@chakra-ui/react'
import { button as LagouButton } from './components/Lagou/button'

function App() {
  console.log('ut：', useTheme())
  const { colorMode, toggleColorMode } = useColorMode()

  return (
    <Box p="5">
      <Box>
        lagou Components
        <LagouButton>11</LagouButton>
        <LagouButton variant="danger" size="sm">11</LagouButton>
      </Box>
      colorMode:{colorMode}
      <Button onClick={toggleColorMode}>切换主题</Button>
      <LightMode>
        <Button colorScheme="blue">按钮</Button>
      </LightMode>
      <DarkMode>
        <Button colorScheme="blue">按钮</Button>
      </DarkMode>
      <Box w={[1, 1, 1 / 2, 1 / 4]} bgColor="brown" >
        width 自适应
      </Box>
      {/* <Box m="3" bgColor="blueviolet" w={[1, 1 / 2, 1 / 4]}  h={200} />
      <Box m="3" bgColor="blueviolet" w="lg" h="lg" fontSize={["12px", "14px", "16px"]} >根据media宽度自适应大小</Box> */}
    </Box>
  );
}

export default App;
